<template>
    <van-popup v-model="showTip" :close-on-click-overlay="false" @click-overlay="onCloseTip"
      class="invoice-select-bremind">
      <div class="close-tip">
        <i class="iconfont icon-icon_close" @click="onCloseTip"></i>
      </div>
      <div class="invoice-tip-title">
       {{t('invoice_notes')}}
      </div>
      <div class="invoice-tip-content">
        <p>
          1{{t('invoice_tip_content_one')}}
        </p>
        <p>2{{t('invoice_tip_content_two')}}</p>
      </div>
      <div class="invoice-tip-button">
        <button class="theme-customize-bg" @click="onCloseTip">{{t('invoice_see')}}</button>
      </div>
    </van-popup>
  </template>
  <script>
  import locale from "../../../../mixins/locale";
  export default {
    props: {
      //是否显示发票提示
      showTip: {
        type: Boolean,
        default: false,
      },
    },
    mixins: [locale],
    methods: {
      //关闭提示弹窗
      onCloseTip() {
        this.$emit("closeTip");
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .invoice-select-bremind {
    width: 5.9rem;
    padding: 0.64rem 0.48rem;
    box-sizing: border-box;
    border-radius: .16rem;
  
    .close-tip {
      position: absolute;
      top: 0.24rem;
      right: 0.24rem;
      color: #bfbfbf;
    }
  
    .invoice-tip-title {
      text-align: center;
      font-weight: 500;
      margin-bottom: 0.56rem;
      font-size: 0.36rem;
    }
  
    .invoice-tip-content {
      letter-spacing: 0.02rem;
      line-height: 0.56rem;
      font-size: 0.32rem;
      font-weight: 400;
    }
  
    .invoice-tip-button {
      margin-top: 0.56rem;
  
      button {
        color: #fff;
        border-radius: 0.4rem;
        width: 100%;
        font-weight: 500;
        border: 0;
        padding: 0.2rem 0;
      }
    }
  }
  </style>
  